<template>
	<view class="work-container">
    <view class="image" style="text-align: center">
      <image class="img" v-if="zckUrl && zckUrl.indexOf('http')>-1" :src="'/fileApi/'+zckUrl"></image>
      <image-view class="img" v-if="zckUrl" :src="zckUrl"></image-view>
    </view>
      <view class="Nav">
        <view class="typeCarS" >
          {{ $t('search:basicAttributes') }}
        </view>
      </view>
      <ul class="ul" >
        <li class="li">
          <view class="title">{{ $t('search:portrait') }}</view>
          <view class="tit">{{rx}}</view>
        </li>
        <li class="li">
          <view class="title">{{ $t('search:name') }}</view>
          <view class="tit">{{xm}}</view>
        </li>
        <li class="li">
          <view class="title">{{ $t('search:gender') }}</view>
          <view class="tit">{{xb}}</view>
        </li>
        <li class="li">
          <view class="title">{{ $t('search:age') }}</view>
          <view class="tit">{{nl}}</view>
        </li>
        <li class="li">
          <view class="title">{{ $t('search:certificate') }}</view>
          <view class="tit">{{zj}}</view>
        </li>
        <li class="li">
          <view class="title">{{ $t('search:ethnicity') }}</view>
          <view class="tit">{{mz}}</view>
        </li>

      </ul>


	</view>
</template>

<script>


  import {getSex,getNationName,getGlassesName,getMaskName,getSunGlassesName} from '@/utils/dict'
  import {getAge} from '@/utils/time'
	export default {
		data() {
			return {
        zckUrl:"",
        rx:'',
        xm:'',
        xb:'',
        nl:'',
        zj:'',
        mz:''
			}
		},
		onLoad(option) {
			var str=localStorage.getItem("zckPerson")
      var obj=JSON.parse(str)
			if(obj!=null && obj!=''){
        this.zckUrl=obj.facePath
        this.rx=obj.facedbName
        this.xm=obj.name
        this.xb=getSex(obj.gender)
        var birth=obj.birthday
        if(birth!=null && birth!=''){
          var time=birth.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3")
          this.nl=getAge(time)
        }
        //this.nl=obj.
        this.zj=obj.cardId
        this.mz=getNationName(obj.nation)
      }
		},
		methods: {

		},

	}
</script>

<style>
page {
		background-color: #fff;
	}

	.top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: start;
		padding: 40rpx 40rpx 10rpx 40rpx;
	}

	.top .image {
		width: 35%;
	}

	.image .img {
		width: 235rpx;
		height: 235rpx;
		border-radius: 10rpx;
	}

	.Proportion_box {
		width: 30%;
		padding: 30rpx 30rpx;
	}

	.Proportion {
		width: 148rpx;
		height: 148rpx;
		font-size: 40rpx;
		color: #2979ff;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #2979ff;
	}

	.text {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx 30rpx 40rpx;
	}

	.text .txt {
		width: 35%;
		text-align: center;
		color: #8d8d8d;
	}

	.ul {
		padding: 0 40rpx;
	}

	.li {
		display: flex;
		align-items: center;
		justify-content: start;
		padding: 30rpx 0;
		border-bottom: 1px solid #ddd;
	}

	.li .title {
		color: #595959;
		width: 30%;
	}

	.li .tit {
		width: 70%;
		color: #000;
		display: flex;
		justify-content: flex-end;
	}
     .Nav{
		 width: 700rpx;
		 margin: auto;
		display: flex;
		justify-content: space-evenly;
		border-bottom:1px solid #f1f1f1 ;
	 }
	.typeCar{
		padding: 20rpx;
	}
	.typeCarS{
		padding: 20rpx;
		border-bottom:1px solid #2979ff ;
		color: #2979ff;
	}
</style>
